<template>
    <!--标签页-->
    <div class="top-tags">

        <el-tabs v-model="$store.state.activeTagIndex" type="card" closable
                 @tab-remove="removeTab" @tab-click="openContent">
            <el-tab-pane
                v-for="(item, index) in myTopTag"
                :key="item.name"
                :label="item.title"
                :name="item.name">

                <!--这个地方是内容，这里应该放一个view-router-->
                <!--{{item.content}}-->

            </el-tab-pane>
        </el-tabs>

    </div>

</template>

<script>

    export default {
        name: "TopTag",
        data() {
            return {
                myTopTag:this.$store.state.topTagArr
            }
        },
        mounted() {
        },
        methods: {
            // 点击打开一个标签
            openContent(obj){
                let componentName = obj.name;
                // 从$store.state.topTagArr中获取到他的参数
                this.jumpTo(componentName);
            },
            /*内部使用的方法*/
            jumpTo(componentName){
                if(componentName != "") {
                    let params = {};
                    this.$store.state.topTagArr.some(item=>{
                        if(item.name == componentName) {
                            params = item.params;
                            console.log(params);
                            return true;
                        }
                    });
                    this.$router.push(params.route);
                    // 联动菜单
                    let activeMenuId = componentName.split("-")[1];
                    this.$store.commit("dealActiveMenu",activeMenuId);
                    // 联动激活的tag栏
                    this.$store.commit("dealActiveTagIndex",componentName);
                    // 联动面包屑
                    this.$store.commit("dealBreadArr",params.params.menuPath);

                }
            },
            // 关闭一个标签
            removeTab(targetName) {
                let tabs = this.$store.state.topTagArr;
                let activeName = this.$store.state.activeTagIndex;

                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.$store.state.topTagArr = tabs.filter(tab => tab.name !== targetName);
                localStorage.setItem("topTagArr",JSON.stringify(this.$store.state.topTagArr));
                // 跳转到激活的地方
                if(tabs.length == 1) {
                    // 如果全部删掉了跳转到首页
                    this.$store.commit("dealActiveMenu","");
                    // 联动激活的tag栏
                    this.$store.commit("dealActiveTagIndex","");

                    this.$router.push({name:"index"});
                } else {
                    this.jumpTo(activeName);
                }

            },

        }
    }
</script>

<style lang="scss" >
    .top-tags {
        height: 50px;
        .el-tabs {
            height: 50px;
            .el-tabs__header .el-tabs__nav {
                border-left: none;
                border-top: none;
            }
        }
    }

</style>
